<template>
  <div class="text-item" :class="{ type2: tt == '2', type3: tt == '3', cls1: state == 0, cls2: state == 1, cls3: state == 2, cls4: (state !== 0 && state !== 1 && state !== 2) }">
    <span :class="{ ECIF: label === 'ECIF' }">{{label}}</span>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    obj: {
      type: Object,
      default() {
        return {}
      }
    },
    tt: {
      type: String,
      default: ''
    }
  },
  computed: {
    state() {
      console.log(Number(this.obj[this.label]))
      return Number(this.obj[this.label])
    }
  }
}
</script>
<style lang="less" scoped>
@keyframes move {
  0% {
    left: 0;
    opacity: 1;
  }
  100%{
    left: 100%;
    opacity: 0;
  }
}
@keyframes move1 {
  0% {
    top: 0;
    opacity: 1;
  }
  100%{
    top: 100%;
    opacity: 0;
  }
}

.text-item{
  display: inline-block;
  line-height: 1;
  font-size: 10.75px;
  padding: 4px 8px;
  &.type2{
    width: 61px;
    height: 17px;
    padding: 0 !important;
    line-height: 17px;
  }
  &.type3{
    width: 17px !important;
    height: 100% !important;
    padding: 6px 0 0 0;
    line-height: 1.1;
  }
  &.cls1{
    color: #00E6F7;
    border: 1px solid linear-gradient(to right,#00E6F7 0,rgba(56, 247, 165, 1) 100%);
    background: linear-gradient(to right,rgba(0, 192, 255, .5) 0,rgba(56, 247, 165, .5) 100%);
    position: relative;
    &::after{
      position: absolute;
      left: 0;
      top: 0;
      width: 15px;
      height: 100%;
      content: '';
      background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
      animation: move ease 1.5s infinite;
    }
    &.type3{
      background: linear-gradient(to bottom,rgba(0, 192, 255, .5) 0,rgba(56, 247, 165, .5) 100%);
    }
    &.type3::after{
      width: 100%;
      height: 15px;
      animation: move1 ease 1.5s infinite;
      background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
    }
  }
  &.cls2{
    color: #00E6F7;
    border: 1px solid #00C0FF;
    background: rgba(0, 192, 255, .5);
  }
  &.cls3{
    color: rgba(56, 247, 165, 1);
    border: 1px solid rgba(34, 218, 138, 1);
    background: rgba(56, 247, 165, .5);
  }
  &.cls4{
    color: rgba(119, 135, 163, 1);
    border: 1px solid rgba(119, 135, 163, 1);
    background: rgba(119, 135, 163, .3);
  }
  .ECIF{
    writing-mode: vertical-lr;
    // transform: rotate(90deg);
  }
}
</style>